<div class="mry-container">
<?php 	
	$sql = "SELECT * FROM article WHERE fix_status = 1 ORDER BY inserted_date_time DESC";
	$rsd = mysql_query($sql);
	$count = mysql_num_rows($rsd);
	$contents = array();
	while($row = mysql_fetch_array($rsd))
	{
		array_push($contents, $row);
	}
	for($i = $index; $i < $index+20;$i++){
		$row = $contents[$i];
		$id = $row["article_id"];
		$type = $row["fix_article_type"];
		$date = new DateTime($row['inserted_date_time']);

		if($type==1)
			$title = "วิเคราะห์และรายงาน";
		else if($type==4)
			$title = "ปาตานีคาเฟ่";
		else if($type==5)
			$title = "บรรณาธิการ";
		else if($type==6)
			$title = "Quote";
		else if($type==7)
			$title = "ภาคสนามปาตานี";
		else if($type==8)
			$title = "การ์ตูน";
		else if($type==9)
			$title = "สื่อสิ่งพิมพ์";
		else if($type==10)
			$title = "Tupat Tube";
		else if($type==11)
			$title = "status of the day";
?>
	 <div class="mry-item masonry-brick">
		 <article class="prl-article w-box">
			<div class="w-box-inner">
				<?php if((bool)preg_match('#<img[^>]+src=[\'"]([^\'"]+)[\'"]#', html_entity_decode($row['description']), $matches))
					{
					   $imageFound = $matches[0];
					   $src = substr($imageFound, strpos($imageFound, "src"));
				?>
						<a class="thumbnail popup-link-image" href=<?php echo substr($src,4,strlen($src))?>>						
							<span class="prl-overlay">
								 <img <?php echo $src;?> alt="Patani Forum"/ >
								<span class="prl-overlay-area o-photo"></span>
							</span>
						</a>
				<?php
					}else if((bool)preg_match('#<iframe[^>]+src=[\'"]([^\'"]+)[\'"]#', html_entity_decode($row['description']), $matches))
					{
						$youtubeFound = $matches[0];
						$src = substr($youtubeFound, strpos($youtubeFound, "src"));
				?>
						<iframe <?php echo $src;?> width="500" height="281"></iframe>
				<?php
					}
				?>

				<h3 class="prl-article-title"><a href="single.php?id=<?php echo $row["article_id"]?>" target="_blank"><?php echo $row["title"]?></a> <span class="prl-badge red"><?php echo $title; ?></span></h3> 
				<div class="prl-article-meta"><span><i class="fa fa-clock-o"></i> <?php echo $date->format('d/m/Y H:i:s');?></span></div>
				<p><?php echo mb_substr(trim(strip_tags(html_entity_decode($row['description']))),0,200,'UTF-8');?></p>
			</div>	
			<div class="prl-article-bottom clearfix">
				<a href="single.php?id=<?php echo $row["article_id"]?>" target="_blank" class="prl-button light floatright">เพิ่มเติม</a>
			</div>
		</article>
	 </div><!-- .mry-item -->
	 <?php }?> 
</div><!-- .mry-container -->


<script type="text/javascript">
$(function () {	
	var $container = $('.mry-container');
	var gutter = 20;
	var min_width = 300;
	$container.imagesLoaded( function(){
		$container.masonry({
			itemSelector : '.mry-item',
			gutterWidth: gutter,
			isAnimated: true,
			columnWidth: function( containerWidth ) {
				var box_width = (((containerWidth - 2*gutter)/3) | 0) ;
				if (box_width < min_width) {box_width = (((containerWidth - gutter)/2) | 0);}
				if (box_width < min_width) {box_width = containerWidth;}
				$('.mry-item').width(box_width);
				return box_width;
			}
		});
	});
	
	$container.infinitescroll({
			navSelector  : '#page-nav', 
			nextSelector : '#page-nav a',
			itemSelector : '.mry-item',
			loading: {
				selector: '#infscr-load',
				msgText  : 'Loading ...',   
				finishedMsg: 'No more posts to load.'
			}
		}, 
		
		function( newElements ) {
			var $newElems = $( newElements ).css({ opacity: 0 });
			$newElems.imagesLoaded(function(){
				$newElems.animate({ opacity: 1 });
				$container.append( $newElems ).masonry( 'reload' );
				$('#page-nav').show();
				
				// init
				$('.popup-link-video').magnificPopup({type:'iframe'});
				$('.popup-link-image').magnificPopup({
					type: 'image',
					fixedContentPos: true,
					mainClass: 'mfp-no-margins mfp-with-zoom', 
					image: {
					verticalFit: true
					},
					zoom: {
						enabled: true,
						duration: 300
					}
				});
				
				$("body").fitVids();
				// init end
			});
			
		
	});
	
	// kill scroll binding
	$(window).unbind('.infscr');

	$("#page-nav a").on('click',function(){
		$container.infinitescroll('retrieve');
		return false;
	});

	// remove the paginator when we're done.
	$(document).ajaxError(function(e,xhr,opt){
	  if (xhr.status == 404) $('#page-nav a').remove();
	});
	
});
</script>

<div id="page-nav">
<a href="<?php echo $file;?>" class="prl-button light fullwidth infscr-button">บทความเพิ่มเติม</a>
</div>
<div id="infscr-load"></div>